<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>可拖动分隔条布局</title>
    <style>
        * {
            box-sizing: border-box;
        }
        
        body {
            margin: 0;
            padding: 0;
            height: 100vh;
            overflow: hidden;
            font-family: Arial, sans-serif;
        }

        .container {
            display: flex;
            height: 100%;
            width: 100%;
        }

        .left-panel, .right-panel {
            overflow: auto;
            padding: 20px;
            height: 100%;
            position: relative;
        }

        .left-panel {
            background-color: #f0f0f0;
            flex: 1 1 50%;
            min-width: 100px;
        }

        .right-panel {
            background-color: #e0e0e0;
            flex: 1 1 50%;
            min-width: 100px;
        }

        .divider {
            width: 5px;
            background-color: #ccc;
            cursor: col-resize;
            transition: background-color 0.3s;
            flex-shrink: 0;
        }

        .divider:hover {
            background-color: #999;
        }

        .divider.active {
            background-color: #555;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="left-panel" id="leftPanel">
            <h2>左侧面板</h2>
            <p>这里可以放置左侧内容</p>
            <p>拖动中间的分隔条可以调整左右面板的大小</p>
        </div>
        <div class="divider" id="divider"></div>
        <div class="right-panel" id="rightPanel">
            <h2>右侧面板</h2>
            <p>这里可以放置右侧内容</p>
            <p>尝试拖动中间的分隔条看看效果</p>
        </div>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const divider = document.getElementById('divider');
            const container = document.querySelector('.container');
            const leftPanel = document.getElementById('leftPanel');
            const rightPanel = document.getElementById('rightPanel');
            
            let isDragging = false;
            let startX, startLeftWidth, startRightWidth;
            
            // 初始化面板宽度
            function initPanelWidths() {
                const containerWidth = container.clientWidth;
                const dividerWidth = 5;
                const savedLayout = localStorage.getItem('panelLayout');
                
                if (savedLayout) {
                    const { leftPercent, rightPercent } = JSON.parse(savedLayout);
                    leftPanel.style.flex = `1 1 ${leftPercent}%`;
                    rightPanel.style.flex = `1 1 ${rightPercent}%`;
                } else {
                    // 默认等分
                    leftPanel.style.flex = '1 1 50%';
                    rightPanel.style.flex = '1 1 50%';
                }
            }
            
            // 鼠标按下事件
            divider.addEventListener('mousedown', function(e) {
                isDragging = true;
                divider.classList.add('active');
                document.body.style.cursor = 'col-resize';
                e.preventDefault();
                
                // 保存初始位置和宽度
                startX = e.clientX;
                startLeftWidth = leftPanel.clientWidth;
                startRightWidth = rightPanel.clientWidth;
            });
            
            // 鼠标移动事件
            document.addEventListener('mousemove', function(e) {
                if (!isDragging) return;
                
                const containerWidth = container.clientWidth;
                const dividerWidth = 5;
                const minPanelWidth = 100;
                
                // 计算宽度变化
                const dx = e.clientX - startX;
                console.log("dx",dx)
                let newLeftWidth = startLeftWidth + dx;
                let newRightWidth = startRightWidth - dx;
                
                // 应用最小宽度限制
                if (newLeftWidth < minPanelWidth) {
                    newLeftWidth = minPanelWidth;
                    newRightWidth = containerWidth - newLeftWidth - dividerWidth;
                } else if (newRightWidth < minPanelWidth) {
                    newRightWidth = minPanelWidth;
                    newLeftWidth = containerWidth - newRightWidth - dividerWidth;
                }
                
                // 计算百分比
                const leftPercent = (newLeftWidth / containerWidth) * 100;
                const rightPercent = (newRightWidth / containerWidth) * 100;
                
                // 应用新宽度
                leftPanel.style.flex = `1 1 ${leftPercent}%`;
                rightPanel.style.flex = `1 1 ${rightPercent}%`;
            });
            
            // 鼠标释放事件
            document.addEventListener('mouseup', function() {
                if (isDragging) {
                    isDragging = false;
                    divider.classList.remove('active');
                    document.body.style.cursor = '';
                    savePanelSizes();
                }
            });
            
            // 保存面板尺寸到本地存储
            function savePanelSizes() {
                const containerWidth = container.clientWidth;
                const leftPercent = (leftPanel.clientWidth / containerWidth) * 100;
                const rightPercent = (rightPanel.clientWidth / containerWidth) * 100;
                
                localStorage.setItem('panelLayout', JSON.stringify({ 
                    leftPercent, 
                    rightPercent 
                }));
            }
            
            // 窗口大小改变时处理
            window.addEventListener('resize', function() {
                if (!isDragging) {
                    initPanelWidths();
                }
            });
            
            // 初始化
            initPanelWidths();
        });
    </script>
</body>
</html>